<script setup>
import { ref, computed } from "vue";
import {useAllStoreData} from '@/stores'
import {userStore} from '@/stores/userStore'
import { useRoute,useRouter } from "vue-router";

const uStore = userStore()
const userInfo = uStore.state.loginUserInfo
const routeList = userInfo?.menuTrees;


const store = useAllStoreData()
const isCollapse = computed(()=>store.state.isCollapse)
const width = computed(()=>store.state.isCollapse?'64px':'180px')

// 点击菜单
const router = useRouter()
const route = useRoute()
const handleMenu = (item)=> {
  router.push(item.path)
  store.selectTag(item)
}

const activeMenu = computed(()=>route.path)
</script>

<template>
  <el-aside :width="width">
    <el-menu class="menu" background-color="#333333bf" text-color="#fff" :collapse="isCollapse" :collapse-transition="false" :default-active="activeMenu">
    <h3 v-if="!isCollapse">通用后台管理系统</h3>
    <h3 v-else>后台</h3>
      <template v-for="item in routeList" :key="item.path">
        <el-sub-menu
          v-if="item.children && item.children.length > 0"
          :index="item.data.path+''"
        >
          <template #title>
           <component class="icons" v-if="item.data.icon" :is="item.data.icon"></component>
           <span>{{ item.data.label }}</span>
            
          </template>
          <el-menu-item
            v-for="(sub) in item.children.filter(f=>f.data.isHidden === 0)"
            :key="sub.data.path"
            :index="sub.data.path+''"
            @click="handleMenu(sub.data)"
          >
            <component  class="icons" v-if="sub.data.icon" :is="sub.data.icon"></component>
            <template v-if="sub.data.isHidden==0" #title>{{ sub.data.label }}</template>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.data.path+''" @click="handleMenu(item.data)">
          <component class="icons" v-if="item.data.icon" :is="item.data.icon"></component>
          <template #title>{{ item.data.label }}</template>
        </el-menu-item>
      </template>
    </el-menu>
  </el-aside>
</template>

<style lang="less" scoped>
.icons {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.el-aside {
  background-color: #333;
  color: #fff;
  h3 {
    text-align: center;
    line-height: 30px;
  }
}
.el-menu {
  border-right: none;
}
</style>
